<template>
	<view class="warp">
		<u-swiper :list="list" height="750" borderRadius="0"></u-swiper>
		<view class="introduce-section">
			<text class="title">甜蜜饰品原创设计民族饰品手工玛瑙编织喜庆婚庆手链手镯</text>
			<view class="span">大道以至简为上，大局以落实为先</view>
			<view class="price-box">
				<text class="price">
					<text class="price-tip">¥</text>
					693.99
					<text class="market_price">¥998</text>
					<text class="sales">已售：998</text>
				</text>
			</view>
		</view>

		<u-gap height="10" bg-color="#eeeeee"></u-gap>
		<view class="cellListBox">
			<uni-card title="商品详情" font-size="34" line-color="#ffa911" :right="false" :arrow="false"></uni-card>
		</view>
		<view class="contentBoxBody">
			<u-parse :html="detail.content" :show-with-animation="true"></u-parse>
		</view>
		
		<popup-layer ref="popup">
			<view class="goodsinfo_mask">
				<image src="/static/pic/01.jpg" class="goods_images"></image>
				<view class="info">
					<view class="title">甜蜜饰品原创设计民族饰品手工玛瑙编织喜庆婚庆手链手镯</view>
					<view style="padding-bottom: 5px;">
						<text class="b">￥693.99</text>
						<text class="span">原价：￥998</text>
					</view>
				</view>
				<i class="coolc icon-guanbi" @click="popupClose"></i>
			</view>
			<view class="number_box">
				<view class="text_sk">数量</view>
				<uni-number-box 
					class="step"
					:min="1" 
					:max="100"
					:value="buynum"
					@eventChange="numChange"
				></uni-number-box>
			</view>
			<view class="cons_box" @click="toBuy">确定购买</view>
		</popup-layer>
		
		<view class="navigation">
			<view class="left">
				<navigator class="item" url="/pages/site/index" hover-class="none">
					<u-icon name="shouye" custom-prefix="coolc" size="46"></u-icon>
					<view class="text u-line-1">首页</view>
				</navigator>
				<navigator class="item" url="/pages/user/order" hover-class="none">
					<u-icon name="dingdan" custom-prefix="coolc" size="46"></u-icon>
					<view class="text u-line-1">订单</view>
				</navigator>
			</view>
			<view class="right">
				<view class="buy btn u-line-1" @click="buyNow">立即购买</view>
			</view>
		</view>
		
		<u-back-top :scroll-top="scrollTop" :bottom="140" right="20" :custom-style="{backgroundColor:'#ffa911'}" :icon-style="{color:'#ffffff',fontSize: '18px'}"></u-back-top>
	</view>
</template>

<script>
	import popupLayer from '@/components/popup-layer/popup-layer'; //弹层组件
	import uniNumberBox from '@/components/uni-number-box'; //数量加减框组件
	export default {
		components: {
			popupLayer,
			uniNumberBox
		},
		data() {
			return {
				showpopup: false,
				buynum:1,
				list: [{
						image: '/static/pic/01.jpg'
					},
					{
						image: '/static/pic/02.jpg'
					},
					{
						image: '/static/pic/03.jpg'
					}
				],
				scrollTop: 0,
				detail: {
					content: `
						<div class="content_area" id="content_area" style="display: block;">
						<p>　　巴尼小镇是云南省怒江傈僳族自治州首个易地扶贫搬迁集中安置点。从山上的金满村搬迁到巴尼小镇，近3年的时间里，搬迁户们的生活发生了可喜的变化。</p>
						<p class="photo_img_20190808" style="text-align: center;"><img src="//p2.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613380766481.jpg" alt="泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）" isflag="1"></p>
						<p class="photo_alt_20190808" style="text-align: center;"><em></em>泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）</p>
						<p>　　搬出四面透风、容易漏雨的“千脚落地房”，住进如今宽敞明亮的楼房，当地居民的生活不断改善。另一边，留在山上的村民在企业帮助下改种经济林果，家庭收入节节攀升。</p>
						<p class="photo_img_20190808" style="text-align: center;"><img src="//p3.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613382671669.jpg" alt="金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）" isflag="1"></p>
						<p class="photo_alt_20190808" style="text-align: center;"><em></em>金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）</p>
						<p>　　这阵子，52岁的米四东心里老惦记个事：吃两碗包谷稀饭。包谷稀饭是把包谷和蚕豆混在一起，有时加点腊肉，搁在三脚架上，生火煮制而成。在高黎贡山上，包谷稀饭曾是金满村人的主食，大多数人连个菜都不舍得炒，就配一碗蘸水吃。从山上搬下来快3年了，米四东说：“在山上盼着吃大米饭，如今天天吃米饭，又想念包谷稀饭了。”</p>
						<p>　　米四东的家在巴尼小镇，地处云南省怒江傈僳族自治州泸水市洛本卓白族乡，紧邻着怒江。这里是怒江州首个易地扶贫搬迁集中安置点，2017年国庆节，金满村首批40户村民入住，2018年最后11户村民入住新居。如今已有搬迁户168户744人，都属于白族支系勒墨人。</p>
						<p>　　3年时间，这里的人和生活发生了哪些变化？这个夏天，记者走进了巴尼小镇。</p>
						<p>　　曾经——</p>
						<p>　　8公里的距离，20年的差距</p>
						<p>　　村民叁益光的家里干净亮堂，客厅的墙上，挂着一家三口在老房子前的合影。由于山地太陡，找不到平地打地基，老房子都是篱笆为墙、木板为顶、木头为柱的“千脚落地房”的样子。四面透风的房子里面黑黢黢的，下面养牲畜，中间住人，上面放粮食。“一入雨季，屋里就怕漏雨，潮乎乎有虱子”。2017年搬迁前，金满村九成村民就住在这种房子里。</p>
						<p>　　从巴尼小镇往背后的高黎贡山深处走，沿着一条水泥路走上8公里，就回到了金满村村委会。金满村11个村民小组，其中5个不通公路、1个是地质灾害隐患点，这6个组如今已整体搬迁。“最远的马社王底小组有16户人家，到村委会要过悬崖、涉小河、爬陡坡，走上三四个小时。”说起过往，村委会主任沈光干嘘唏不已。</p>
						<p>　　站在村委会的院子里，只见大山围绕、白云悠悠，山外面还是山。2014年底，金满村人均收入仅有1400多元，全村1310人有建档立卡贫困户1250人。沈光干说：“在山上，一年到头辛辛苦苦，还是穷成这个样！”</p>
						<p>　　听老人们说起以前的生活，就像听“穿越故事”一样：去邻近的县背洋芋回来种，前后得一星期，头疼脑热不舍得花钱去卫生院……“过去从金满村到巴尼小镇的8公里距离，也是发展相差20年的距离。”巴尼小镇社区副主任和碧武介绍，群众刚搬出大山时，不会用电器，连起床叠被子的习惯都没有。</p>
						<p>　　不过，在宽敞明亮的楼房里住上一段时间，大家都知道了现代生活的好处。乡中心完小五年级的学生花燕梅一家去年搬到小镇上，每天早上走几分钟就能到学校。“搬下来好，在这里衣服不容易脏，老师也讲得好！”孩子的话，总是简单明了。</p>
						<p>　　如今，按照“一户一宅基地”的政策，米四东在山上的老房子拆了，一家人踏踏实实住在了小镇上。米四东感慨：“还是在山下容易赚钱。”</p>
						<p>　　山下——</p>
						<p>　　干活更方便，管理更规范</p>
						<p>　　在巴尼小镇，最常见的交通工具就是摩托车，还有不少人家门口停着机动三轮车、小货车和轿车。米四东说，有了钱，大家都愿意买辆摩托车，“干活方便了许多。”</p>
						<p>　　记者了解到，巴尼小镇目前外出务工118户282人，以本地打零工为主。在小镇上，就有家扶贫车间生产民族服装，平时有20多个女工。车间的管理人员告诉记者，一个熟练女工一个月挣三四千元没问题。</p>
						<p>　　赚得多了，还要看花得多不多，对于搬出大山的人来说，上楼后的生活成本增加了多少？</p>
						<p>　　米四东算了算账：小镇的水费一户每年20元，电费也不贵，过日子主要就是买些吃的。“这个就丰俭由己了，青菜要买，土豆南瓜山上就有。”</p>
						<p>　　和碧武介绍，随着巴尼小镇社区建设越来越规范，一些以前“难以想象”的方法都有了实打实的用处。“比如我们这里实行积分制管理，积极参加升国旗仪式、搞好卫生都有加分，居民可以到超市用积分兑换商品。”社区超市经营者玉花梅说，去年超市里兑换了2万多元的积分。</p>
						<p>　　当然，搬下来的时间并不长，对大部分人来说还是处在适应阶段。在和碧武看来，村子里的人与外界的交流还是偏少，视野和观念转变得还不够快。</p>
						<p>　　米四东就有这种体会。洛本卓白族乡是“中国民间文化艺术之乡”，金满村被列入“云南省第四批旅游特色村”。作为州级非物质文化遗产传人，米四东如今在巴尼小镇教授勒墨人的传统歌舞。“等哪天怒江大峡谷的旅游火起来了，这门技艺一定会是旅游的‘招牌’产品。”米四东心里寻思着。</p>
						<p>　　山上——</p>
						<p>　　既抓“生态账”，又算“经济账”</p>
						<p>　　一边是米四东感慨“山下容易赚钱”，另一边却是仍然留在山上的5个村民小组80户人家，如今的8公里，还有20年的发展差距吗？</p>
						<p>　　“‘两不愁三保障’早就实现了，现在村里的生活跟过去相比简直是天壤之别。眼下村里惦记的，是怎样既抓‘生态账’，又算‘经济账’。”洛本卓乡宣传委员麻继成兼任金满村党总支书记，搬迁启动前就驻村工作，到现在还扎在村里忙活调整种养殖业结构。</p>
						<p>　　靠山吃山，金满村过去是在四五十度的山坡地上开荒种包谷，如今要进行山体生态修复，除了改种经济林果，别无他法。</p>
						<p>　　麻继成说，乡里组织搬迁群众将原住地的土地林地出租、流转或退耕还林，采取“合作社+村党总支+农户+基地”模式，种植花椒、核桃、草果、香橼等经济作物。现在，1000多亩花椒、1000多亩核桃、600多亩草果和300多亩香橼已经成了山上的“绿色银行”。“村里今年准备再发展250亩香橼，香橼两年就能挂果，收益前景非常可观。”</p>
						<p>　　农产品“升了级”，收入也“开了源”。麻继成说，农民在企业承包的果园里务工，每天的工资有100元，如今每天都有二三十人在果园里干活。</p>
						<p>　　“搬出去有盼头，留下来有干劲。”如今，乡里还在加紧研究制定金满村乡村旅游规划。“等客栈、农家乐、步行街都建好了，幸福一定来敲门。”洛本卓乡党委书记郝春荣说，巩固脱贫成果、走向乡村振兴，“好日子还在后头”。</p><!--repaste.body.end-->
						</div>
					`
				}
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({title: "甜蜜饰品原创设计民族饰品手工玛瑙编织喜庆婚庆手链手镯"});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			toBuy(){
				uni.redirectTo({
					url: '/pages/simple/cart?id=1&num='+this.buynum
				});
			},
			popupClose(){
				this.$refs.popup.close();
			},
			buyNow(){
				this.$refs.popup.show();
			},
			numChange(ret){
				this.buynum = ret.number;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		padding-bottom: 50px;
	}
	.cfont {
		font-size: 20px;
		font-weight: bolder;
	}
	
	/* 标题简介 */
	.introduce-section{
		width: 750rpx;
		background: #fff;
		padding: 12px 15px;
		box-sizing: border-box;
		
		.span {
			padding-top: 10px;
			font-size: 13px;
			color: #999;
		}
		.title{
			font-size: 16px;
			color: #333333;
			line-height: 25px;
		}
		.price-box{
			width: 690rpx;
			display:flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 6px;
			height:33px;
			font-size:13px;
			font-weight:bold;
			color:#ffa911;
		
			.price{
				font-size:25px;
				position:relative;
				
				.price-tip{
					align-items: center;
					padding-top: 12px;
					font-size: 14px;
					color: #ffa911;
					padding-right: 5px;
				}
				
				.market_price{
					font-size:14px !important;
					display:inline;
					color:#999999;
					padding-left:10px;
					font-weight:500;
					text-decoration:line-through;
				}
				
				.sales{
					font-size:14px !important;
					display:inline;
					color:#999999;
					padding-left:10px;
					font-weight:500;
				}
			}
		
			.coolc-tag-text {
				border: 1px solid $u-error;
				color: $u-error;
				border-radius: 4px;
				padding: 2px 5px;
				font-size: 10px;
			}
		}
	}
	
	.cellListBox {
		background: #ffffff;
		padding: 15px 10px;
	}
	
	.contentBoxBody {
		font-size: 16px;
		color: $u-content-color;
		line-height: 1.6;
	}
	
	.navigation {
		width: 750rpx;
		display: flex;
		position: fixed;
		justify-content: space-between;
		bottom: 0;
		border-top: solid 1px #f2f2f2;
		background-color: #ffffff;
		padding: 8px;
		box-sizing: border-box;
		box-shadow: 0px 0px 5px #dedede;
		
		.left {
			display: flex;
			font-size: 10px;
			
			.item {
				margin: 0 15px;
				text-align: center;
				
				&.car {
					text-align: center;
					position: relative;
					.car-num {
						position: absolute;
						top: -5px;
						right: -5px;
					}
				}
			}
		}
		.right {
			display: flex;
			font-size: 14px;
			align-items: center;
			padding-left: 10px;
			
			.btn {
				width: 480rpx;
				line-height: 40px;
				text-align: center;
				padding: 0 15px;
				border-radius: 25px;
				color: #ffffff;
			}
			.buy {
				background-color: #35c877;
			}
		}
	}
	
	/* 立即购买、加入购物车弹层内容 */
	.popup-content { 
		height:auto;
		
		.goodsinfo_mask { 
			width:100%;
			padding: 0 14px;
			height:100px;
			padding-bottom:13px;
			display: flex;
			justify-content: space-between;
			
			.goods_images {
				width:100px;
				height:100px;
				border:1px solid #eeeeee;
				border-radius:5px;
				padding:5px;
				background:#ffffff;
				margin-top: -15px;
			}
			.info { 
				width: 480rpx;
				padding-left: 10px;
				
				.title{
					width: 100%;
					padding: 13px 0 5px 0;
					overflow:hidden;
					text-overflow:ellipsis;
					font-size: 14px;
					color: #666;
					line-height: 20px;
				}
				
				.b {
					height:20px;
					font-size: 20px;
					font-weight: bold;
					color:#ffa911;
				}
				.span {
					height:20px;
					color:#999999;
					padding-left: 4px;
					font-size:12px;
					text-decoration:line-through;
					
					i {
						color:#000000;
						font-style:normal;
					}
				}
			}
		}
		.number_box { 
			width:100%;
			height:61px;
			display:flex;
			justify-content:space-between;
			padding:13px;
			border-top:1px solid #eeeeee;
			border-bottom:1px solid #eeeeee;
			
			.text_sk { height:35px; line-height:35px; }
			
			.uni-numbox {
				position: inherit;
			}
		}
		.cons_box {
			width:100%;
			height:48px;
			line-height:48px;
			clear:both;
			text-align:center;
			background:#35c877;
			color:#ffffff;
			font-size:18px;
		}
	 }
</style>